<template>
  <div>
    <van-nav-bar left-arrow title="搜索" @click-left="$router.back()">
    </van-nav-bar>
    <!-- 2.搜索框 -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      autofocus
      v-model.trim="value"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 推荐词 -->
    <van-cell
      v-for="(item, index) in showList"
      :key="index"
      :title="item"
      icon="search"
      @click="
        $router.push({
          path: '/searchResult',
          query: { q: suggestionList[index] },
        })
      "
    >
      <template #title>
        <span class="custom-title" v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getSuggestion } from "./home.js";
export default {
  name: "Search",
  data() {
    return {
      // 搜索内容
      value: "",
      // 推荐词列表
      suggestionList: [],
      //  函数防抖
      timeId: "",
    };
  },
  methods: {
    //   搜索事件 输入框回车 + 点击右侧搜索按钮
    onSearch() {
      // console.log("搜索" + this.value);
      // 跳转路径
      this.$router.push({ path: "/searchResult", query: { q: this.value } });
    },
    // 输入事件，搜索框变化
    onInput() {
      // 函数防抖 第一步要清除 短时间内的访问，以最后一次为准
      clearTimeout(this.timeId);
      // 第二部开启防抖定时器
      this.timeId = setTimeout(async () => {
        // 非空判断
        if (this.value == "") {
          this.suggestionList = [];
          return;
        }
        console.log("搜索" + this.value);
        // 获取推荐词列表
        let res = await getSuggestion(this.value);
        // console.log(res);
        this.suggestionList = res.data.data.options;
      }, 500);
    },
  },
  // 搜索词高亮效果
  computed: {
    showList() {
      //(1)创建正则 ： 全局匹配当前搜索框内容，  g:全局匹配  i:不区分大小写

      //(2)map隐射数组
      return this.suggestionList.map((value) => {
        let reg = new RegExp(this.value, "gi");
        //将搜索结果替换为<span>标签
        return value.replace(
          reg,
          (match) => `<span style="color:red">${match}</span>`
        );
      });
    },
  },
};
</script>

<style>
</style>